<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from "vue";

const info =ref('彭于晏')

// 生命周期 的执行顺序和注册顺序是无关的
// dom元素加载之前执行
onBeforeMount(()=>{
  console.log('onBeforeMount执行了');
})

// dom 元素加载完毕之后执行 在这里可以请求dom元素和操作dom元素
onMounted(()=>{
  console.log('onMounted执行了');
})

// 数据改变之前
onBeforeUpdate(()=>{
console.log('onBeforeUpdate执行了');
})

// 数据改变完毕
onUpdated(()=>{
  console.log('onUpdated执行了');
})

// 销毁前
onBeforeUnmount(()=>{
  console.log('onBeforeUnmount执行了');
})

// 销毁后
onUnmounted(()=>{
  console.log('onUnmounted执行了');
})
</script>

<template>
<h1 @click="info+='🐂'">{{ info }}</h1>



</template>

<style>

</style>